<template>
	<view class='issue'>
		<view class="issue-head">
			<slot name="headPic"></slot>
			<!-- <image v-if="headPicShow" :src="headPicValue" class="issue-head-pic" ></image> -->
			<text v-if="headTitleShow" class="issue-head-title">{{headTitleValue.slice(0,5)}}</text>

			<view class="issue-head-star-box" v-if="starsShow">
				<uni-rate :size="18" :value="5" @change="changeScore"/>
			</view>
		</view>
		<textarea v-if="textareaShow" v-model="infoReceive.textareaValue" :placeholder="textareaPlaceholder" />
		<view class="c_imgs">
			<view class="c_img">
				<image :src="item"  v-for="item in imgs"></image>
			</view>
			<button type="default" size="mini" class="c_btn" @tap="addimg">上传图片</button>
		</view>
		<view class="issue-btn-box">
			<button v-if="submitShow" class="submit-btn" type="primary" @click="doSubmit">{{submitText}}</button>
			<slot name="submit"></slot>
		</view>
	</view>
</template>
<script>
	export default {
		props: {
			headPicShow: { //图片
				type: [String, Boolean],
				default: true,
			},
			headPicValue: {
				type: String,
				default: require('@/static/imgs/st_pic.png')
			},

			headTitleShow: { //标题
				type: [String, Boolean],
				default: true,
			},
			headTitleValue: {
				type: String,
				default: "评分"
			},

			starsShow: {
				type: [String, Boolean],
				default: true,
			},
			starsMax: { // 星星最大个数
				type: [String, Number],
				default: 5,
			},
			starDefault: { //未选中
				type: String,
				default: require('@/static/imgs/st_star.png'),
			},
			starActive: {
				type: String,
				default: require('@/static/imgs/st_star_active.png'),
			},
			score: { //默认分数
				type: [Number, String],
				default: 5
			},
			starsDisabled: { //是否禁用star
				type: [Boolean],
				default: false
			},

			textareaShow: { // 多行文本显示
				type: [String, Boolean],
				default: true,
			},
			textareaPlaceholder: {
				type: [String],
				default: "宝贝满足你的期待吗？说说你的使用心得，分享给想买的他们吧"
			},


			submitShow: { // 发布按钮
				type: [String, Boolean],
				default: true,
			},
			submitText: {
				type: String,
				default: "发布",
			},
			infoReceive: { // 获取值
				type: Object,
				default: function() {
					return {
						score: 5,
						textareaValue: "",
						imgs: []
					}
				}
			}
		},
		data() {
			return {
				imgs: [],
			}
		},
		computed: {
			formatScore() {
				return this.infoReceive.score
			}
		},
		methods: {
			/**
			 * @name 设置分数
			 */
			setScore(score) {
				if (this.starsDisabled !== false) return
				this.infoReceive.score = score
				this.$emit("scoreChange", score)
			},

			/**
			 * @name 获取textarea内容
			 */

			// blur(e) {
			// 	console.log(e)
			// 	this.infoReceive.textareaValue = e.detail.value
			// },
			changeScore(e){
				this.infoReceive.score = e.value;
			},
			/**
			 * @name 提交
			 */
			doSubmit() {
				console.log(this.infoReceive)
				this.$emit('submit', this.infoReceive)
			},
			addimg() {
				var that = this;
				var token = ""
				const value = uni.getStorageSync('token');
				if (value) {
					token = value
				}
				uni.chooseImage({
					count: 9, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					// sourceType: ['album'], //从相册选择
					success: function(res) {
						var path = res.tempFilePaths;
						path.forEach((image)=>{
							uni.uploadFile({
								url: that.$url.state.url.upload,
								filePath: image,
								name: 'a',
								header: {
									token: token
								},
								formData: {
									'file': 'a'
								},
								success: upres => {
									let data = JSON.parse(upres.data);
									if (data.code == 200) {
										that.imgs.push(data.data.url);
										that.infoReceive.imgs = JSON.stringify(that.imgs);
									}
								}
							})
						})
					}
				});
			}
		},
		created() {
			this.infoReceive.score = this.score
		}
	}
</script>
<style lang='scss'>
	$backgroundC:#f9f9f9;
	$borderColor:#f5f5f5;
	$white:#ffffff;
	$fontSize:28upx;

	.issue {
		background-color: $backgroundC;

		&-head {
			background-color: $white;
			height: 100upx;
			border-top: 1upx solid $borderColor;
			border-bottom: 1upx solid $borderColor;
			padding: 0 25upx;
			display: flex;
			align-items: center;

			&-pic {
				width: 70upx;
				height: 70upx;
				border-radius: 50%;
				vertical-align: middle;
				margin-right: 17upx;
			}

			&-title {
				line-height: 100upx;
				font-size: 30upx;
				vertical-align: middle;
				margin-right: 35upx;
			}

			&-star-box {
				display: inline-block;

				image {
					width: 32upx;
					height: 32upx;
					vertical-align: middle;
					margin-right: 14upx;
				}

				image.active {
					animation: star_move ease-in 1 1s, star_rotate ease 1.5s infinite 1s;
				}
			}
		}

		textarea {
			width: 100%;
			height: 420upx;
			background-color: $white;
			font-size: $fontSize;
			color: #898989;
			padding: 24upx;
			box-sizing: border-box;
			line-height: 40upx
		}

		&-btn-box {
			padding: 54upx 30upx;

			button {
				width: 100%;
				height: 80upx;
				border-radius: 80upx;
				font-size: $fontSize;
				background-color: $bg-color;
				line-height: 80upx
			}
		}
	}

	@keyframes star_move {
		from {
			width: 50upx;
			height: 50upx;
			transform: rotate(180deg)
		}

		to {
			width: 32upx;
			height: 32upx;
			transform: rotate(0)
		}
	}

	@keyframes star_rotate {
		0% {
			transform: rotateY(360deg)
		}

		100% {
			transform: rotateY(180deg)
		}
	}

	.c_imgs {
		padding: 20upx;
		box-sizing: border-box;

		.c_img {
			display: flex;
			margin-top: 20upx;

			image {
				width: 150upx;
				height: 150upx;
			}
		}

		.c_btn {
			margin-top: 20upx;
		}
	}
</style>
